<template>
    <div class="about"  @mousemove="getMousePoint">
      <h1>This is an about page</h1>
      <h2>展示鼠标的坐标</h2>
      <p>x:{{ x }}---y:{{ y }}</p>
  
      <hr />
  
      <h2>随机展示一个猫的图片</h2>
      <h3 v-if="loading">Loading......</h3>
      <img v-else :src="catUrl" width="400" alt="" />
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "AboutView",
  });
  </script>
  
  <script lang="ts" setup>
  /* 
    import引入文件的时候,并不是把文件内容拿进来执行的,而是让文件先执行,我们拿到这个文件的暴露的值
  */
  import useMousePoint from "./hooks/useMousePoint";
  import useShowCat from "./hooks/useShowCat";
  
  //1. 获取鼠标位置的功能Hooks
  const { x, y, getMousePoint } = useMousePoint();
  
  //2. 获取随机猫的功能Hooks
  const { loading, catUrl } = useShowCat();
  </script>
  
  <style lang="scss" scoped>
  .about {
    height: 500px;
    border: 1px solid #000;
    h1 {
      background-color: yellowgreen;
    }
  }
  </style>
  